<template>
    <div ref="detailParticularsRef" class="detail-particulars">
        <el-card class="statistics-card" shadow="never">
            <template #header>
                <div class="card-header">
                    <span class="statistics-title card-title">成员执行明细</span>
                </div>
            </template>
            <div class="card-content">
                <ZwSearchForm row-num="3" :option="detailParticularsSearchOption" @search="search" @reset="reset" />
                <ZwTable
                    v-if="detailParticularsFlag"
                    ref="tableRef"
                    tab-h="450px"
                    :option="detailParticularsTableOption(isExpired)"
                    :fetch-params="searchParams"
                    :fetch-api="detailParticularsFetchApi()"
                    @data-change="dataChange"
                    @sort-change="sortChange">
                    <template v-if="isShowRemindBtn" #headerOperateLeft>
                        <div class="table-operate">
                            <el-button @click="remind">一键提醒</el-button>
                        </div>
                    </template>
                    <template #headerOperate>
                        <div class="table-operate">
                            <el-button @click="exportMass($event)">导出</el-button>
                        </div>
                    </template>
                </ZwTable>
                <el-skeleton v-else :rows="4" animated />
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref, nextTick, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useLazyData } from '@/hooks/commonHooks';
import { messRemind, massInfoData, exportData } from '@/api/friendcircle';
import detailParticularsSearchOption from '../configuration/detailParticularsSearchOption';
import detailParticularsTableOption from '../configuration/detailParticularsTableOption';
import ZwSearchForm from '@/components/zw/search-form1.0/SearchForm';
import ZwTable from '@/components/zw/table1.0/Table';
import { ElMessage } from 'element-plus';
import { parabolaAnimation } from '@/utils/parabola';
import { ShowTaskMessage } from '@/hooks/TaskMessageHooks';
import dayjs from 'dayjs';

const route = useRoute();
const routeQuery = route.query;

const tableRef = ref<null | (InstanceType<typeof ZwTable> & any)>(null);
const detailParticularsRef = ref<null | (InstanceType<typeof HTMLDivElement> & any)>(null);
const detailParticularsFlag = ref<boolean>(false);

/**
 * @description: 数据懒加载
 * @return {*}
 */
useLazyData(detailParticularsRef, () => {
    search();
});

const defaultParams = {
    page: 1,
    page_size: 15,
    sort: 'DESC', // 排序 类型  ASC 正序  DESC 倒序（默认）
    sort_filed: 'publish_status', // 排序 字段  publish_status 默认值  like_nums 点赞数  comment_nums 评论数  comment_user_nums 评论人数
    send_moment_id: '', // 朋友圈id
    publish_status: '2', // 成员发表状态   0 未发表  1 已发表  2 全部
    work_user_name: '' // 员工姓名
};

const searchParams = ref<any>({});
// 已下发状态的任务，是否存在未发表成员
const isRemind = ref<boolean>(false);
// 是否已经过期
const isExpired = ref<boolean>(false);
// 综合判断 是否展示提醒按钮
// 首先判断任务是否过期，再判断是否有未发表任务成员
const isShowRemindBtn = computed(() => !isExpired.value && isRemind.value);

/**
 * @description: table api
 * @param {*} any
 * @return {*}
 */
const detailParticularsFetchApi = () => {
    return new Promise(resolve => {
        const { id: send_moment_id } = routeQuery;
        const params = { send_moment_id };
        resolve([params, massInfoData]);
    });
};

/**
 * @description: 查询
 * @param {*} v
 * @return {*}
 */
const search = (v: any = {}, flag = false) => {
    detailParticularsFlag.value = false;
    searchParams.value = { ...defaultParams, ...v };
    detailParticularsFlag.value = true;
    !flag && nextTick(() => tableRef.value.getTable().clearSort());
};

/**
 * @description: 重置
 * @param {*} v
 * @return {*}
 */
const reset = (v: any) => {
    detailParticularsFlag.value = false;
    searchParams.value = { ...defaultParams };
    detailParticularsFlag.value = true;
    nextTick(() => tableRef.value.getTable().clearSort());
};

/**
 * @description: 排序
 * @param {*} sortProps
 * @return {*}
 */
const sortChange = (sortProps: any) => {
    const { prop: sort_filed = 'publish_status' } = sortProps;
    let sort = 'DESC';
    if (sortProps.order === 'ascending') {
        sort = 'ASC';
    }
    if (sortProps.order === 'descending') {
        sort = 'DESC';
    }
    const params = { sort, sort_filed };
    search(params, true);
};

/**
 * @description: table数据获取
 * @param {*} data
 * @return {*}
 */
const dataChange = (data: any) => {
    if (data) {
        // is_remind 已下发状态的任务，且存在未发表成员时，展示，否则不展示  1 代表不展示 2代表展示
        // close_time 任务结束时间，如果任务已结束，则不赞时提醒按钮
        const { is_remind = 1, close_time = '' } = data;
        if (close_time) {
            isExpired.value = dayjs().valueOf() > dayjs(close_time).valueOf();
        }
        isRemind.value = is_remind === 2 ? true : false;
    }
};

/**
 * @description: 一键提醒
 * @return {*}
 */
const remind = async () => {
    const { id: send_moment_id } = routeQuery;
    const params = { send_moment_id };
    await messRemind(params);
    ElMessage.success('提醒发送成功');
};

/**
 * @description: 导出
 * @param {*} e
 * @return {*}
 */
const exportMass = async (e: any) => {
    const { id: send_moment_id } = routeQuery;
    const params = { ...defaultParams, ...searchParams.value, send_moment_id };
    await exportData(params);
    parabolaAnimation(e);
    ShowTaskMessage('导出明细异步任务创建成功');
};
</script>

<style lang="scss" scoped>
.detail-particulars {
    min-height: 380px;
    margin-bottom: 18px;

    .font-style {
        white-space: nowrap;
        font-size: 14px;
        color: #444;
    }

    .card-title {
        white-space: nowrap;
        font-size: 16px;
        color: #444;
        font-weight: 500;
    }

    .statistics-card {
        .card-header {
            display: flex;
            align-items: center;
            gap: 6px;

            .statistics-title {
            }

            :deep(.tip-text) {
                width: 100px;

                .tip-text-item {
                }
            }

            .el-image {
                width: 20px;
                height: 20px;
            }
        }
    }
}

:deep(.card-content) {
    .zw-search-form1 {
        background-color: #f9f9f9;
        margin-bottom: 18px;
    }
}

:deep(.status-point) {
    --status-bgcolor: #ccc;

    &::before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        width: 6px;
        height: 6px;
        margin-right: 8px;
        background-color: var(--status-bgcolor);
        border-radius: 4px;
    }
}
</style>
